<template>
    <div style="height: 97%;background-color: white;">
      <Row>
        <i-Col span="24">
          <Card>
            <p slot="title">
              <Icon type="ios-list"></Icon>
              用户列表
            </p>
            <Row>
              <Input v-model="searchForm.name" placeholder="请输入名称" style="width: 200px" />
              <span @click="handleSearch" style="margin: 0 10px;"><Button type="primary" icon="search">搜索</Button></span>
            </Row>
            <Row>
              <Button type="primary" style="margin-top:10px" @click="addRole">添加用户权限</Button>
              <Button type="primary" style="margin-top:10px;margin-left: 10px;" @click="addMenu">添加菜单</Button>
            </Row>
            <Row type="flex" justify="space-between"  class="advanced-router">
                <Col span="12">
                    <Table border stripe :columns="menuColumns" :data="MenuData" :loading="loading" style="width: 100%;margin-top:10px">
                        <template slot-scope="{ row, index }" slot="icon">
                            <icon :type="row.icon"></icon>
                        </template>
                        <template slot-scope="{ row, index }" slot="del_flag">
                            <i-switch v-model="row.del_flag" true-value="0" false-value="1" @on-change="UpdateMenuStatus(row)">
                                <Icon type="md-checkmark" slot="open"></Icon>
                                <Icon type="md-close" slot="close"></Icon>
                            </i-switch>
                        </template>
                        <template slot-scope="{ row, index }" slot="action" >
                            <Button type="primary" size="small" style="margin-right: 5px" @click="editMenu(row)">编辑</Button>
                            <Button type="error" size="small" @click="deleteMenu(row)">删除</Button>
                        </template>
                    </Table>
                </Col>
                <Col span="11">
                    <Table border stripe :columns="columns" :data="data" :loading="loading" style="width: 100%;margin-top:10px"></Table>
                    <Page :total="count" :current="searchForm.current" show-total style="margin-top:10px;" @on-change="pageChange"></Page>
                </Col>
              
            </Row>
          </Card>
        </i-Col>
      </Row>
      <Modal title="用户菜单管理" :mask-closable="false" :closable="false" v-model="modalAdd">
        <Form ref="formRef" :model="formValidate" :rules="ruleValidate" :label-width="80">
          <FormItem label="用户名" prop="name">
            <i-Input v-model="formValidate.name" :disabled="loginNameDisabled"></i-Input>
          </FormItem>
          <FormItem label="菜单" prop="name">
            <Tree ref="Tree" show-checkbox :data="menuList"></Tree>
          </FormItem>
        </Form>
        <div slot="footer">
          <Button type="text" @click="addCanFun" v-show="modalCanBut">取消</Button>
          <Button type="primary" @click="addOkFun" :loading="modalLoading">确定</Button>
        </div>
      </Modal>
      <Modal title="添加菜单" :mask-closable="false" :closable="false" v-model="menuAdd">
        <Form ref="menuAddForm" :model="menuAddForm" :rules="ruleMenuForm" :label-width="100">
          <FormItem label="菜单地址名称" prop="name">
            <i-Input v-model="menuAddForm.name"></i-Input>
          </FormItem>
          <FormItem label="菜单文件名称" prop="href">
            <i-Input v-model="menuAddForm.href"></i-Input>
          </FormItem>
          <FormItem label="菜单名称" prop="title">
            <i-Input v-model="menuAddForm.title"></i-Input>
          </FormItem>
          <FormItem label="菜单图标" prop="icon">
            <Select filterable :prefix="menuAddForm.icon" v-model="menuAddForm.icon" >
                <Option v-for="item in iconList"  :value="item">
                  <Icon :type="item" size="24"></Icon>
                  {{ item }}
                </Option>
              </Select>
          </FormItem>
        </Form>
        <div slot="footer">
          <Button type="text" @click="menuAddCanFun" v-show="modalCanBut">取消</Button>
          <Button type="primary" @click="menuAddOkFun" :loading="modalLoading">确定</Button>
        </div>
      </Modal>
      <Modal title="添加权限" :mask-closable="false" :closable="false" v-model="roleAdd">
        <Form ref="roleAddForm" :model="roleAddForm" :rules="ruleRoleForm" :label-width="100">
          <FormItem label="权限名称" prop="role_name">
            <i-Input v-model="roleAddForm.role_name"></i-Input>
          </FormItem>
        </Form>
        <div slot="footer">
          <Button type="text" @click="roleAddCanFun" v-show="modalCanBut">取消</Button>
          <Button type="primary" @click="roleAddOkFun" :loading="modalLoading">确定</Button>
        </div>
      </Modal>
    </div>
  </template>
  
  <script>
  import util from "../../api/util.js"
  import list from "./iconList.js";
  export default {
    data(){
      return {
        isEdit:false,
        modalAdd:false,
        roleAdd:false,
        menuAdd:false,
        loading:false,
        modalLoading:false,
        modalCanBut:true,
        loginNameDisabled:true,
        iconList:list,
        searchForm:{
          type:'',
          current:1
        },
        menuList:[],
        count:0,
        MenuData:[],
        menuColumns:[
            {
                title:'菜单名称',
                key:'title',
                align:"center"
            },
            {
                title:'路由地址',
                key:'name',
                align:"center"
            },
            {
                title:'文件地址',
                key:'href',
                align:"center"
            },
            {
                title:'菜单图标',
                key:'icon',
                slot:'icon',
                align:"center"
            },
            {
                title:'状态',
                key:'del_flag',
                slot:'del_flag',
                align:"center"
            },
            {
                title:'操作',
                key:'icon',
                slot:'action',
                align:"center",
                width:150
            },
        ],
        columns:[
          {
            title:'权限名称',
            key:'role_name'
          },
          {
            title:'操作',
            key:'action',
            width:210,
            align:'center',
            render:(h, params) => {
              return h('div',[
                h('Button',{
                  props:{
                    type:'success',
                    size:'small'
                  },
                  style:{
                    marginRight:'5px'
                  },
                  on:{
                    click:() => {
                      this.edit(params);
                    }
                  }
                },'编辑可用菜单'),
                h('Button',{
                  props:{
                    type:'error',
                    size:'small'
                  },
                  style:{
                    marginRight:'5px'
                  },
                  on:{
                    click:() => {
                      this.delete(params);
                    }
                  }
                },'删除')
              ]);
            }
          }
        ],
        data:[],
        formValidate:{
          sort:1
        },
        ruleValidate:{
          name:[
            {required:true,message:'必填项',trigger:'blur'}
          ]
        },
        menuAddForm:{
            id:"",
            name:'',
            title:"",
            href:"",
            icon:""
        },
        roleAddForm:{
          role_name:'',
        },
        ruleMenuForm:{
          name:[
            {required:true,message:'必填项',trigger:'blur'}
          ],
          href:[
            {required:true,message:'必填项',trigger:'blur'}
          ],
          title:[
            {required:true,message:'必填项',trigger:'blur'}
          ],
          icon:[
            {required:true,message:'必填项',trigger:'blur'}
          ],
        },
        ruleRoleForm:{
          role_name:[
            {required:true,message:'必填项',trigger:'blur'}
          ],
        }
      }
    },
    methods:{
      init(){
        let self = this;
        this.loading = true;
        util.post(this,"sys_role/pageData",this.searchForm,function(datas){
          self.data = datas.data.data.data;
          self.count = datas.data.data.count;
          self.loading = false;
        })
        util.post(this,"sys_user_menu/GetMenuList",{id:1},function(datas){
            console.log(datas.data)
          self.MenuData = datas.data.data;
          //self.count = datas.data.count;
          self.loading = false;
        })
      },
      handleSearch(){
        this.searchForm.current = 1;
        this.init();
      },
      pageChange(current){
        this.searchForm.current = current;
        this.init();
      },
      edit(params){
        let treedata = [];
        let self = this;
        self.loading = true;
        util.post(this,"sys_user_menu/getMenuData",{id : params.row.id},function(datas){
          for(var i = 0; i < datas.data.data.length; i ++){
            treedata.push(datas.data.data[i]);
          }
          self.formValidate.id = params.row.id;
          self.formValidate.name = params.row.username;
          self.menuList = treedata;
          self.modalAdd = true;
          self.loading = false;
        })
      },
      delete(params){
        let self = this;
        util.post(self, 'sys_role/DeleteRole', {id: params.row.id}, function(datas){
            if(datas.data = "删除成功"){
                self.$Message.info("删除成功");
                self.init();
            }
        })
      },
      editMenu(row){
        let self = this;
        self.isEdit = true;
        self.menuAdd = true;
        self.menuAddForm.id = row.id;
        self.menuAddForm.title = row.title;
        self.menuAddForm.name = row.name;
        self.menuAddForm.href = row.href;
        self.menuAddForm.icon = row.icon;
      },
      deleteMenu(row){
        let self = this;
        util.post(self, "sys_user_menu", {id: params.id}, function(datas){
            if(datas.data == "删除成功"){
                self.$Message.info("删除成功");
            }
        })
      },
      addOkFun(){
        let self = this;
        let menuData = this.$refs['Tree'].getCheckedNodes();
        console.log(menuData);
        self.loading = true;
        util.post(this,"sys_user_menu/updateUserMenu",{role_id:this.formValidate.id,menuData:menuData},function(){
          self.$Message.info("修改成功");
          self.addCanFun();
        })
      },
      addCanFun(){
        this.modalAdd = false;
      },
      addMenu(){
        this.menuAdd = true;
        this.isEdit = false;
      },
      addRole(){
        this.roleAdd = true;
      },
      menuAddCanFun(){
        this.menuAdd = false;
        this.menuAddForm.id = ""
        this.menuAddForm.name = ""
        this.menuAddForm.title = ""
        this.menuAddForm.href = ""
        this.menuAddForm.icon = ""
      },
      roleAddCanFun(){
        this.roleAdd = false;
      },
      UpdateMenuStatus(row){
        console.log(row);
        this.isEdit = true;
        this.menuAddOkFun();
      },
      menuAddOkFun(){
        let self = this;
        console.log(self.menuAddForm);
        this.$refs['menuAddForm'].validate((valid) => {
          if(valid){
            let params = {
                'id':self.menuAddForm.id,
                'name':self.menuAddForm.name,
                'href':self.menuAddForm.href,
                'title':self.menuAddForm.title,
                'icon':self.menuAddForm.icon
            };
            if(self.isEdit == false){
                
                util.post(self,'sys_user_menu/addMenu',params,function(datas){
                    console.log(datas);
                    self.menuAddCanFun();
                })
            }else{
                util.post(self, 'sys_user_menu/updateMenu', params, function(datas){
                    console.log(datas);
                    self.menuAddCanFun();
                })
            }
            
            
          }
        })
      },
      roleAddOkFun(){
        let self = this;
        this.$refs['roleAddForm'].validate((valid) => {
            if(valid){
                let params = {
                    role_name: self.roleAddForm.role_name
                }
                util.post(self, 'sys_role/AddRole', params, function(datas){
                    self.roleAddCanFun();
                    self.init();
                })
            }
        })
      }
    },
    mounted(){
      this.init();
    }
  }
  </script>